<template>
	<div>
		<view class="topTab">

			<van-tabs @click="navigatorOnChange">
				<van-tab title="话题" class="talk">
					<topics :currentIndex="currentIndex"></topics>
				</van-tab>

				<van-tab title="闲置" class="freetake">
					<idles :currentIndex="currentIndex"></idles>
				</van-tab>

				<van-tab title="跑腿" clas="run">
					<runErrands :currentIndex="currentIndex"></runErrands>
				</van-tab>

				<van-tab title="租赁" class="rent">
					<leases :currentIndex="currentIndex"></leases>
				</van-tab>

			</van-tabs>
		</view>
	</div>
</template>

<script>
	import topics from '@/components/topics/topics.vue'
	import idles from '@/components/idles/idles.vue'
	import runErrands from '@/components/runErrands/runErrands.vue'
	import leases from '@/components/leases/leases.vue'

	export default {
		name: 'home',
		components: {
			topics,
			idles,
			runErrands,
			leases
		},
		data() {
			return {
				title: ['话题', '闲置', '跑腿', '租赁'],
				// 当前的所在分栏索引
				currentIndex:0
			}
		},
		// 当点击tabbar时触发
		onTabItemTap() {
			// 短震动效果
			uni.vibrateShort()
			console.log('震动');
		},
		methods:{
			// 切换所在分栏索引
			navigatorOnChange(res){
				this.currentIndex = res.detail.index
			}
		}
	}
</script>

<style scoped>
	page {
		min-height: 100vh;
	}

	/* 底部的紫色 */
	div {
		overflow: inherit;
		height: 100vh;
		background-color: #5B53C9;
	}

	.topTab {}

	.container {
		height: 100vh;
		overflow: hidden;
	}
</style>
